<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <!-- 关键字 -->
    <meta name="keywords" content="纽曼官网，纽曼电器" />
    <!-- 描述 -->
    <meta name="description" content="该网站为纽曼公司的一个产品展示网站。" />
    <!-- 渲染 -->
    <meta name="render" content="webkit" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
    <title>联系我们</title>
    <link rel="stylesheet" href="../css/reset.css" />
    <link rel="stylesheet" href="../css/public.css" />
    <link rel="stylesheet" href="./contact.css" />
    <!-- 网站小图标 -->
    <link rel="shortcut icon" href="./images/logo.png" type="png/x-icon" />
    <!--引用百度地图API-->
    <script
      type="text/javascript"
      src="http://api.map.baidu.com/api?v=2.0&ak=A5j0zidDv3y1zNLNRFDIVGXSOOsUdoXX"
    ></script>
  </head>

  <body>
    <!-- 导航栏 -->
    <header>
      <h1>
        <a href="../index/index.html"
          ><img src="./images/logo.jpg" alt="logo" class="logo"
        /></a>
      </h1>
      <ul class="nav">
        <li><a href="../index/index.html">企业首页</a></li>
        <li><a href="../about/about.html">关于我们</a></li>
        <li><a href="../news/news.html">新闻中心</a></li>
        <li><a href="../product/product.html">产品中心</a></li>
        <li><a href="../service/service.html">客户服务</a></li>
        <li class="action"><a href="../contact/contact.html">联系我们 </a></li>
      </ul>
      <ul class="language">
        <li>CN</li>
        <li>EN</li>
      </ul>
    </header>
    <!-- 单张图片的banner -->
    <div class="banner">
      <ul class="imgs">
        <li>
          <a href="./news.html"
            ><img src="./images/banner.jpg" alt="banner"
          /></a>
        </li>
      </ul>
    </div>
    <!-- news内容区 -->
    <div class="container">
      <!-- 侧边栏 -->
      <aside>
        <!-- 导航栏 -->
        <div class="aside-title-nav">
          <div class="aside-title">
            <h2 class="title">contact us</h2>
            <p>联系我们</p>
          </div>
          <ul class="aside-nav-contact">
            <li>Carefully Create</li>
            <li>And</li>
            <li>Elaborate Service</li>
            <li>精心创造 精心服务</li>
          </ul>
        </div>
        <!-- 搜索框 -->
        <div class="search">
          <div class="aside-title">
            <h2 class="title">SEARCH</h2>
            <p>搜索</p>
          </div>
          <form action="#">
            <input type="search" />
            <img
              src="./images/iconfont-fangdajing.png"
              alt="search"
              class="iconfont-search"
            />
          </form>
        </div>
      </aside>

      <div class="container-content">
        <!-- 内容区上部标题+导航 -->
        <div class="content-title">
          <h3>
            <span class="title-chinese">联系我们</span>
            <span class="title-english">contact us</span>
          </h3>
          <div class="crumbs-nav">
            您当前的位置&nbsp;&nbsp;&gt;
            <a href="../index/index.html">首页</a> &nbsp;&nbsp;&gt;<span
              class="action"
              >产品中心</span
            >
          </div>
        </div>
        <!-- 内容 -->
        <div class="map-contact">
          <!-- 地图 -->
          <div
            style="
              width: 930px;
              height: 280px;
              border: #ccc solid 1px;
              font-size: 12px;
            "
            id="map"
          ></div>
          <!-- 给我留言 -->
          <div class="leave-message">
            <!-- 将h3设置为公共样式 -->
            <h3 class="message-h3">给我留言</h3>
            <form action="#">
              <label>姓名：</label><input type="text" /><br />
              <label>邮箱：</label><input type="email" /><br />
              <label class="to-message">留言：</label
              ><textarea cols="30" rows="10"></textarea><br />
              <!--将buttton外包裹一个div会更容易设置其css -->
              <input type="submit" class="button1" />
              <input type="reset" class="button2" />
            </form>
          </div>
          <!-- 联系方式 -->
          <div class="contact-info">
            <h3 class="message-h3">联系方式</h3>
            <address>
              <p>地址：广州市天河区大观南路26号（长胜商务大厦D栋）</p>
              <p>手机：13434316048</p>
              <p>QQ:332857028</p>
              <p>邮箱：332857028@qq.com</p>
            </address>
          </div>
        </div>
      </div>
    </div>
    <!-- footer -->
    <footer>
      <div class="footer">
        <div class="footer-content">
          <div class="footer-nav">
            <dl>
              <dt><a href="#">关于我们</a></dt>
              <dd><a href="#">公司简介</a></dd>
              <dd><a href="#">企业文化</a></dd>
              <dd><a href="#">企业荣誉</a></dd>
              <dd><a href="#">资格认证</a></dd>
              <dd><a href="#">研发生产</a></dd>
            </dl>
            <dl>
              <dt><a href="#">产品中心</a></dt>
              <dd><a href="#">饮水机</a></dd>
              <dd><a href="#">冰箱</a></dd>
              <dd><a href="#">洗衣机</a></dd>
              <dd><a href="#">空调</a></dd>
              <dd><a href="#">其他产品</a></dd>
            </dl>
            <dl>
              <dt><a href="#">新闻中心</a></dt>
              <dd><a href="#">最新动态</a></dd>
              <dd><a href="#">企业新闻</a></dd>
              <dd><a href="#">行业新闻</a></dd>
              <dd><a href="#">热点聚焦</a></dd>
            </dl>
            <dl>
              <dt><a href="#">客户服务</a></dt>
              <dd><a href="#">招商加盟</a></dd>
              <dd><a href="#">购买流程</a></dd>
              <dd><a href="#">售后服务</a></dd>
              <dd><a href="#">技术支持</a></dd>
              <dd><a href="#">常见问题</a></dd>
            </dl>
            <dl>
              <dt><a href="#">联系我们</a></dt>
              <dd><a href="#">在线留言</a></dd>
              <dd><a href="#">网上咨询</a></dd>
              <dd><a href="#">联系我们</a></dd>
            </dl>
          </div>
          <form action="#" class="footer-contact">
            <input type="text" name="name" placeholder="请输入您的姓名" />
            <input type="tel" name="tel" placeholder="请输入您的联系方式" />
            <textarea
              name=""
              id=""
              cols="30"
              rows="10"
              placeholder="请输入留言"
            ></textarea>
            <br />
            <input type="submit" />
          </form>
        </div>
      </div>
      <p>
        Copyright&copy;2030WenCun.com All Rights Reserved &nbsp;&nbsp; Design by
        WenCun 粤ICP备13005446号-1
      </p>
    </footer>
    <script type="text/javascript">
      //创建和初始化地图函数：
      function initMap() {
        createMap(); //创建地图
        setMapEvent(); //设置地图事件
        addMapControl(); //向地图添加控件
        addMapOverlay(); //向地图添加覆盖物
      }
      function createMap() {
        map = new BMap.Map("map");
        map.centerAndZoom(new BMap.Point(115.713214, 34.405159), 14);
      }
      function setMapEvent() {
        map.enableScrollWheelZoom();
        map.enableKeyboard();
        map.enableDragging();
        map.enableDoubleClickZoom();
      }
      function addClickHandler(target, window) {
        target.addEventListener("click", function () {
          target.openInfoWindow(window);
        });
      }
      function addMapOverlay() {
        var markers = [
          {
            content: "我的备注",
            title: "商丘学院",
            imageOffset: { width: 0, height: 3 },
            position: { lat: 34.412188, lng: 115.727012 },
          },
        ];
        for (var index = 0; index < markers.length; index++) {
          var point = new BMap.Point(
            markers[index].position.lng,
            markers[index].position.lat
          );
          var marker = new BMap.Marker(point, {
            icon: new BMap.Icon(
              "http://api.map.baidu.com/lbsapi/createmap/images/icon.png",
              new BMap.Size(20, 25),
              {
                imageOffset: new BMap.Size(
                  markers[index].imageOffset.width,
                  markers[index].imageOffset.height
                ),
              }
            ),
          });
          var label = new BMap.Label(markers[index].title, {
            offset: new BMap.Size(25, 5),
          });
          var opts = {
            width: 200,
            title: markers[index].title,
            enableMessage: false,
          };
          var infoWindow = new BMap.InfoWindow(markers[index].content, opts);
          marker.setLabel(label);
          addClickHandler(marker, infoWindow);
          map.addOverlay(marker);
        }
      }
      //向地图添加控件
      function addMapControl() {
        var scaleControl = new BMap.ScaleControl({
          anchor: BMAP_ANCHOR_BOTTOM_LEFT,
        });
        scaleControl.setUnit(BMAP_UNIT_IMPERIAL);
        map.addControl(scaleControl);
        var navControl = new BMap.NavigationControl({
          anchor: BMAP_ANCHOR_TOP_LEFT,
          type: BMAP_NAVIGATION_CONTROL_LARGE,
        });
        map.addControl(navControl);
        var overviewControl = new BMap.OverviewMapControl({
          anchor: BMAP_ANCHOR_BOTTOM_RIGHT,
          isOpen: true,
        });
        map.addControl(overviewControl);
      }
      var map;
      initMap();
    </script>
  </body>
</html>
